<template>
	<view class="preimage">
		<u-navbar title="查看图片" :border-bottom="false" back-icon-color="#ffffff" title-color="#fff"
			:background="{backgroundColor:'#000'}"></u-navbar>
		<swiper class="swiper" circular indicator-color="#666" @change="swiperchange" :current="swiperindex" indicator-active-color="#fff"
			:indicator-dots="true" :autoplay="false" :duration="300">
			<swiper-item v-for="(item,index) in piclist" :key="index">
				<block v-if="item.types==1">
					<view class="fenhui" v-if="item.type==0">
						<image class="fenhuiimage" src="../../static/forbid.png"></image>
						<view class="label">照片已焚毁</view>
						<view class="js-vip">
							<text>(会员可延长查看时间达6秒)</text>
							<view class="button" @click="member">马上升级会员</view>
						</view>
					</view>
					<view class="weifenhui" v-else>
						<image :class="item.burn?'burn':''" :src="item.pic[0]" mode="aspectFit"></image>
						<view class="yhjf" v-if="item.burn">
							<view class="tip">阅后即焚照片</view>
							<view class="click" @click="view(index)">点我查看</view>
						</view>
					</view>
				</block>
				<block v-else>
					<view class="fenhui" v-if="item.type==0">
						<image class="fenhuiimage" src="../../static/forbid.png"></image>
						<view class="label">视频已焚毁</view>
					</view>
					<view class="weifenhui" v-else>
						<video :id="'myvideo'+item.id" @ended="videoend(index)" :show-fullscreen-btn="false" :show-progress="false" :show-center-play-btn="false" :enable-progress-gesture="false" :controls="false" :class="item.burn?'burn':''" :poster="item.cover" :src="item.pic[0]"></video>
						<view class="yhjf" v-if="item.burn">
							<view class="tip">阅后即焚视频</view>
							<view class="click" @click="view(index)">点我查看</view>
						</view>
					</view>
				</block>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				swiperindex: 3,
				piclist: [],
				statusheight: uni.getSystemInfo().statusBarHeight,
				uid: 8025,
				isVip: 0,
				video: []
			}
		},
		onShow() {
			this.isVip = this.$store.state.isVip
		},
		onReady: function(res) {
		},
		onLoad(options) {
			var page = getCurrentPages()
			if (page.length >= 0) {
				var prevpage = page[page.length - 2].$vm
				if (prevpage.imgList) {
					this.piclist = prevpage.imgList
				}
			}
			this.uid = options.userid
			this.swiperindex = options.index
			this.piclist.forEach(item => {
				if(item.types==2){
					item.cover = this.$formatImage(item.cover)
				}
				item.pic[0] = this.$formatImage(item.pic[0])
			})
			// console.log(this.piclist)
			// console.log(JSON.stringify(this.piclist))
		},
		methods: {
			async view(index) {// 阅后即焚才能激活此函数
				if(this.piclist[index].types==1){// 图片
					this.piclist[index].burn = 0
					var time;
					if (this.isVip > 0) {
						time = 6000;
					} else {
						time = 2000;
					}
					setTimeout(() => {
						this.piclist[index].type = 0
					}, time)
				}else{
					this.piclist[index].isburn = 1
					this.piclist[index].burn = 0
					this.video['item'+this.piclist[index].id] = uni.createVideoContext('myvideo' + this.piclist[index].id)
					this.video['item'+this.piclist[index].id].play()
					setTimeout(() => {
						this.piclist[index].burn = 1
						this.piclist[index].type = 0
						this.video['item'+this.piclist[index].id].pause()
					}, 30000)
				}
				await this.$Request({
					url: 'apis/Home/User/burn',
					data: {
						user_id: this.uid,
						to_user: this.$store.state.userid,
						id: this.piclist[index].id,
					}
				})
			},
			videoend(index){
				if(this.piclist[index].isburn){
					this.piclist[index].burn = 1
					this.piclist[index].type = 0
				}
			},
			member() {
				uni.navigateTo({
					url: '/pages/member/index'
				})
			},
			swiperchange(e){
				this.swiperindex = e.detail.current
			}
		},
		watch:{
			swiperindex(newval, oldval){
				if(this.piclist[oldval].types==2){
					try{
						this.video['item'+this.piclist[oldval].id].pause()
					}catch{
						console.log('video stop fail')
					}
				}
				if(this.piclist[newval].types==2){
					if(this.piclist[newval].burn==0){
						this.video['item'+this.piclist[newval].id] = uni.createVideoContext('myvideo' + this.piclist[newval].id)
						this.video['item'+this.piclist[newval].id].play()
					}
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.fenhui {
		height: calc(100vh - 44px) !important;
		margin-top: 42vh;
		text-align: center;

		.fenhuiimage {
			width: 10vw;
			height: 10vw;
		}

		.label {
			color: #fff;
		}

		.js-vip {
			text {
				color: #fff;
			}

			.button {
				margin: 0 auto;
				margin-top: 20px;
				background: none;
				color: #A87B38;
				border: 1px solid #A87B38;
				width: 150px;
				line-height: 40px;
				border-radius: 5px;
			}
		}
	}

	.weifenhui {
		height: calc(100vh - 44px) !important;

		video {
			width: 100vw;
			height: 100vh;
		}
	}

	swiper {
		height: calc(100vh - 44px - 50px) !important;
		background-color: #2A2931;

		image {
			width: 100vw;
			height: 100%;

			&.burn {
				filter: blur(30rpx);
			}
		}

		.yhjf {
			z-index: 1111111;
			position: absolute;
			top: 46%;
			left: calc(50% - 78rpx);
			color: #fff;
			text-shadow: #000 0 2px 3px;
			text-align: center;
		}
	}

	/deep/uni-swiper {
		height: calc(100vh - 44px) !important;
		background-color: #000000;
	}

	/deep/uni-image {
		width: 100vw;
		height: 100%;

		&.burn {
			filter: blur(30rpx);
		}
	}

	/deep/uni-swiper-item {
		text-align: center;
		height: 100%;

		.yhjf {
			position: absolute;
			top: 46%;
			left: calc(50% - 78rpx);
			color: #fff;
			text-shadow: #000 0 2px 3px;
		}
	}

	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 40rpx;
	}

	.logo {
		height: 200rpx;
		width: 200rpx;
		margin-top: 100rpx;
		margin-left: auto;
		margin-right: auto;
		margin-bottom: 50rpx;
	}

	.text-area {
		display: flex;
		justify-content: center;
	}

	.title {
		font-size: 28rpx;
		color: $u-content-color;
	}

	.link-demo {
		margin-top: 80rpx;
	}
</style>
